<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click.native.prevent="handleCreate">
        添加
      </el-button>
      <el-button style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click.native.prevent="handleDelete">
        删除
      </el-button>
    </div>
    <el-table :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="regionId" border stripe
      highlight-current-row style="width: 100%;" :data="listData" :empty-text="emptyText"
      @select-all="handelSelectAll" ref="multipleTable" lazy :load="loadData" @select="handleSelect">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" prop="regionId"></el-table-column>
      <el-table-column label="区域名称" prop="regionName"></el-table-column>
      <el-table-column label="区域代码" prop="regionCode"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click.native.prevent="handleEdit(scope.row.regionId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  </div>
</template>

<script>
  import { getList, del } from '@/api/region'
  import { errorMsg, successMsg } from '@/utils/my'

  export default {
    inject: ['reload'],
    data() {
      return {
        reqData: {
          parentId: 0
        },
        listData: [],
        childrenList: {},
        loading: true,
        delRows: [],
        delIds: new Set(),
        emptyText: '暂无任何数据'
      }
    },

    created() {
      this.fetchData()
    },

    methods: {
      handleCreate() {
        this.$router.push({
          path: '/admin/region/create'
        })
      },

      handleEdit(id) {
        this.$router.push({
          path: '/admin/region/edit/' + id
        })
      },

      fetchData() {
        const that = this
        that.loading = true
        getList(that.reqData).then(res => {
          that.loading = false
          that.listData = res.data
        })
      },

      handelSelectAll(rows) {
        let isSelectAll = this.delIds.size > 0 ? false : true
        for (let i = 0; i < this.listData.length; i++) {
          if (isSelectAll) {
            this.delIds.add(this.listData[i].regionId)
          } else {
            this.delIds.delete(this.listData[i].regionId)
          }
          let firstChildList = this.childrenList[this.listData[i].regionId]
          if (firstChildList && firstChildList.length && firstChildList.length > 0) {
            for (let j = 0; j < firstChildList.length; j++) {
              if (isSelectAll) {
                this.delIds.add(firstChildList[j].regionId)
              } else {
                this.delIds.delete(firstChildList[j].regionId)
              }
              this.$refs.multipleTable.toggleRowSelection(firstChildList[j])
              let secondChildList = this.childrenList[firstChildList[j].regionId]
              if (secondChildList && secondChildList.length && secondChildList.length > 0) {
                for (let m = 0; m < secondChildList.length; m++) {
                  if (isSelectAll) {
                    this.delIds.add(secondChildList[m].regionId)
                  } else {
                    this.delIds.delete(secondChildList[m].regionId)
                  }
                  this.$refs.multipleTable.toggleRowSelection(secondChildList[m])
                }
              }
            }
          }
        }
      },

      handleSelect(selection, row) {
        let isSelected = false
        for (let i = 0; i < selection.length; i++) {
          if (selection[i].regionId == row.regionId) {
            isSelected = true
            break
          }
        }
        if (isSelected) {
          this.delIds.add(row.regionId)
        } else {
          this.delIds.delete(row.regionId)
        }
        let childList = this.childrenList[row.regionId]
        if (childList && childList.length && childList.length > 0) {
          for (let j = 0; j < childList.length; j++) {
            if (isSelected) {
              this.delIds.add(childList[j].regionId)
            } else {
              this.delIds.delete(childList[j].regionId)
            }
            this.$refs.multipleTable.toggleRowSelection(childList[j], isSelected)
            let secondChildList = this.childrenList[childList[j].regionId]
            if (secondChildList && secondChildList.length && secondChildList.length > 0) {
              for (let m = 0; m < secondChildList.length; m++) {
                if (isSelected) {
                  this.delIds.add(secondChildList[m].regionId)
                } else {
                  this.delIds.delete(secondChildList[m].regionId)
                }
                this.$refs.multipleTable.toggleRowSelection(secondChildList[m], isSelected)
              }
            }
          }
        }
      },

      handleDelete() {
        const that = this
        if (that.delIds.size <= 0) {
          return errorMsg('请至少选择一项')
        }
        let ids = [...that.delIds]
        console.log(ids)
        return
        that.loading = true
        del({
          ids: ids.join(',')
        }).then(res => {
          that.loading = false
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          successMsg(res.message)
          that.reload()
        })
      },

      loadData(tree, treeNode, resolve) {
        const that = this
        that.reqData.parentId = tree.regionId
        getList(that.reqData).then(res => {
          that.childrenList[tree.regionId] = res.data
          resolve(res.data)
        })
      }

    }
  }
</script>

<style>
  .filter-container {
    margin-bottom: 10px;
  }

  .pager {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
</style>
